---
title: 添加基础样式
description: 在 Tailwind 的基础上添加自己的全局基础样式的最佳实践。
---

<!-- Base (or global) styles are the styles at the beginning of a stylesheet that set useful defaults for basic HTML elements like `<a>` tags, headings, etc. or apply opinionated resets like the popular [box-sizing reset](https://www.paulirish.com/2012/box-sizing-border-box-ftw/). -->
基础（或全局）样式是样式表开头的样式，可为诸如`<a>` 标签、标题等基本 HTML 元素设置有用的默认值，或者有目的重置，像流行的 [box-sizing reset](https://www.paulirish.com/2012/box-sizing-border-box-ftw/) 。

<!-- Tailwind includes a useful set of base styles out of the box that we call [Preflight](/docs/preflight), which is really just [modern-normalize](https://github.com/sindresorhus/modern-normalize) plus a thin layer of additional more opinionated styles. -->
Tailwind 包含了一系列有用的开箱即用的基础样式，我们称之为 [Preflight](/docs/preflight)，他实际上是 [modern-normalize](https://github.com/sindresorhus/modern-normalize)，外加少些额外的样式。

<!-- Preflight is a great starting point for most projects, but if you'd ever like to add your own additional base styles, here are some recommendations for doing it idiomatically. -->
对于大多数项目来说，Preflight 是一个很好的起点，但是如果您想添加您自己的额外的基础样式，以下是一些惯用做法的建议。

---

## 在您的 HTML 中使用类

<!-- If you just want to apply some global styling to the `html` or `body` elements, consider just adding existing classes to those elements in your HTML instead of writing new CSS: -->
如果您只想对 `html` 或者 `body` 元素应用某种全局样式，只需将现有类添加到 HTML 中的那些元素，而不是编写新的 CSS ：

```html
<!doctype html>
<html lang="en" class="text-gray-900 leading-tight">
  <!-- ... -->
  <body class="min-h-screen bg-gray-100">
    <!-- ... -->
  </body>
</html>
```

---

## 使用 CSS

<!-- If you want to apply some base styles to specific elements, the easiest way is to simply add them in your CSS. -->
如果要将某些基本样式应用于特定元素，最容易的方法是将其简单地添加到 CSS 中。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}
```

<!-- By using the `@layer` directive, Tailwind will automatically move those styles to the same place as `@tailwind base` to avoid unintended specificity issues. -->
通过使用 `@layer` 指令，Tailwind 将自动将这些样式移到 `@tailwind base` 的同一位置，以避免出现一些意外问题。

<!-- Using the `@layer` directive will also instruct Tailwind to consider those styles for purging when purging the `base` layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. -->
使用 `@layer` 指令还能告诉 Tailwind 在清除基础样式时考虑这些样式。阅读我们的 [关于生产优化的文档](/docs/optimizing-for-production) 以了解更多信息。

<!-- It's a good idea to use [@apply](/docs/functions-and-directives#apply) or [theme()](/docs/functions-and-directives#theme) to define these styles to avoid accidentally deviating from your design system. -->
最好使用 [@apply](/docs/functions-and-directives#apply) 或者 [theme()](/docs/functions-and-directives#theme) 来定义这些样式，以避免意外偏离您的设计系统。

### @font-face 规则

<!-- You can use the same approach to add your `@font-face` rules for any custom fonts you're using: -->
您可以使用相同的方式为您正在使用的任何自定义字体添加 `@font-face` 规则。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}
```

---

## 使用插件

<!-- You can also add base styles by [writing a plugin](/docs/plugins#adding-base-styles) and using the `addBase` function: -->
您还可以通过 [编写插件](/docs/plugins#adding-base-styles) 并使用 `addBase` 函数来添加基础样式：

```js
// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, config }) {
      addBase({
        'h1': { fontSize: config('theme.fontSize.2xl') },
        'h2': { fontSize: config('theme.fontSize.xl') },
        'h3': { fontSize: config('theme.fontSize.lg') },
      })
    })
  ]
}
```

<!-- Any styles added using `addBase` will be inserted into the `base` layer alongside Tailwind's other base styles. -->
使用 `addBase` 添加的样式将会与 Tailwind 的其它基础样式一起添加到 `base` 层中。
